<template>
    <el-drawer :with-header="true" custom-class="custom-title-height" v-model="drawer" :close-on-click-modal="false"
        title="模块配置配置" :direction="'rtl'">
        <el-scrollbar>

            <div class="itm">
                <div style="display: flex; justify-content: space-between;">
                    <div style="display: flex;align-items: center;">
                        <div><el-tag type="primary">模块配置</el-tag></div>
                        <div style="padding-left: 5px;"><el-button size="small" type="danger" @click="addEv" plain>增加</el-button></div>
                    </div>
                    <div>
                        <el-button size="small" type="danger" @click="previewEv" plain>预览</el-button>
                        <el-button size="small" type="danger" @click="saveEv" plain>保存</el-button>

                    </div>
                </div>
                <VueDraggable v-model="data" :animation="150">
                    <div style="height: 50px; display: flex; align-items: center; padding-left: 10px; box-sizing: border-box;"
                        v-for="(itm, index) in data" :index>
                        <div> <el-tag type="primary">模板{{ index + 1 }}</el-tag></div>

                        <div>

                            <div class="global-config-itm">
                                <div> <el-switch v-model="itm.show" :active-value="true" :inactive-value="false"
                                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                                        active-text="显示" inactive-text="隐藏" /></div>

                                <div style="padding-left: 5px;"> <el-button size="small" type="danger" plain @click="deleteRowEv(index)">
                                        删除
                                    </el-button></div>
                            </div>



                        </div>
                        <!-- <div>
                            <el-switch v-model="itm.show" :active-value="true" :inactive-value="false"
                                style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" active-text="显示"
                                inactive-text="隐藏" />
                            <el-button type="primary" @click="deleteRowEv('bottom', index)" link>
                                删除
                            </el-button>
                        </div> -->
                    </div>
                </VueDraggable>
            </div>
            <el-dialog v-model="dialogVisible" title="增加模板" width="500" :before-close="handleClose"
                :close-on-click-modal="false">
                <div><el-select v-model="addComponentName" placeholder="请选择组件模板" size="large" style="width: 100%">
                        <el-option v-for="(value, key) in chartComponentName" :key="key" :label="value" :value="key" />
                    </el-select></div>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button type="primary" @click="addSuerButtonEv">
                            确认
                        </el-button>
                    </div>
                </template>
            </el-dialog>
        </el-scrollbar>
        <el-dialog v-model="dialogVisibleImage" title="模板选择" width="50%" :before-close="handleClose">
            <div style="height: 300px">
                <componentsFileList @dbRowBasicFile="dbRowBasicFile" />
            </div>
        </el-dialog>
    </el-drawer>
</template>

<script setup>

import { ref, inject, onMounted, onActivated } from 'vue'
import { chartComponentName, chartComponentInitData } from '@/utils/chart.js'
import { VueDraggable } from "vue-draggable-plus"
import componentsFileList from '@/views/setting/basic/file/components/index.vue'
const drawer = ref(false)
const data = ref([])
const dialogVisible = ref(false)
const dialogVisibleImage = ref(false)
const addComponentName = ref('')


const emit = defineEmits(['emitGetDataEv'])
const provideSaveEv = inject('provideSaveEv');
const imageType = ref(null)

onMounted(() => {

})
onActivated(() => {

})

const previewEv = () => {
    emit('emitGetDataEv', data)
}

const saveEv = async () => {
    console.log('保存修改方法')
    // await emit('emitGetDataEv', data)
    await provideSaveEv()
}

const handleClose = (done) => {
    done()
}

const addEv = () => {
    dialogVisible.value = true
}
const addSuerButtonEv = () => {
    if (addComponentName.value == '') {
        ElMessage.error('请选择模板')
        return
    }
    console.log(addComponentName.value)
    data.value.splice(data.value.length, 0, chartComponentInitData[addComponentName.value])
    dialogVisible.value = false
}

const deleteRowEv = async (index) => {
    const message = await ElMessageBox.confirm('确定删除此组件吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning ',
        roundButton: true,
    }).catch((err) => err)
    if (message === 'confirm') {
        data.value.splice(index, 1)
    }
}


const dbRowBasicFile = (val) => {
    console.log(val)
    if (imageType.value == 'c') {
        data.backgroundImages = val.id
    } else if (imageType.value == 'l') {
        data.titleLeftLogo = val.id
    } else {
        data.titleRightLogo = val.id
    }
    dialogVisibleImage.value = false
}

defineExpose({
    drawer,
    data
})

</script>

<style lang='less' scoped>
@left-width: 120px;

.itm {
    border: 1px solid #dcdfe6;
    padding: 2px;
    box-sizing: border-box;
}

.itm-config {
    display: flex;
    align-items: center;
    height: 60px;
    line-height: 60px;
    border-bottom: 1px solid #dcdfe6;
    box-sizing: border-box;

    .left {
        width: @left-width;
        text-align: right;
        padding-right: 5px;
        box-sizing: border-box;
    }

    .right {
        width: calc(100% - @left-width);
    }

}

.itm .itm-config:last-of-type {
    border-bottom: 0 solid #dcdfe6;
    box-sizing: border-box;
}

.global-config-itm {
    display: flex;
    align-items: center;
    height: 30px;
    padding: 5px;
    box-sizing: border-box;
}
</style>